<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class='box'>
        <input type="text" id="input1" />
        <span id="span1"></span>
    </div>
    <script>
        // 简单的数据绑定
        let data = {
            inputValue: ''
        };
        Object.keys(data).forEach(key => {
            Object.defineProperty(data, key, {
                get() {
                    return data[key]
                },
                set(newVal) {
                    let oSpan = document.getElementById('span1');
                    oSpan.innerHTML = newVal;
                }
            })
        })
        let oInput = document.getElementById('input1');
        oInput.addEventListener('input', function(e) {
            data.inputValue = e.target.value
        })







        // 简单的数据劫持
        // var data = {
        //   name: ''
        // };
        // function say(name) {
        //   if (name === '古天乐') {
        //     console.log('我是古天乐')
        //   } else if (name === '张家辉') {
        //     console.log('我是张家辉')
        //   } else {
        //     console.log('大家一起玩贪玩蓝月')
        //   }
        // }

        // Object.keys(data).forEach(key => {
        //   Object.defineProperty(data, key, {
        //     enumerable: true,
        //     configurable: true,
        //     get: function () {
        //       console.log('get' + key)
        //     },
        //     set: function (newVal) {
        //       say(newVal)
        //     }
        //   })
        // })
        // data.name = '古天乐';
        // data.name = '张家辉';
        // data.name = '马少东';
    </script>
</body>

</html>